<template>
    <view class="content" :style="{ '--color': color }">
        <view>
            <status-bar :title="title"></status-bar>
            <Search :placeTxt="placeTxt" @Search="Search"></Search>
        </view>
        <view class="Wrapper" :style="scrollHeight">
            <view class="Left">
                <view class="list ellipsis" @click="changeTab(item)" :class="{ Active: item.id == id }" v-for="(item, index) in pageData" :key="index">{{ item.title }}</view>
            </view>
            <view class="scrollViewBox" :style="scrollHeight">
                <scroll-view scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" @scroll="scroll" v-if="articleData.length" class="scrollView" :style="scrollHeight">
                    <view class="list" @click="$Means.Sublevel(item)" v-for="(item, index) in articleData" :key="index">
                        <image :src="$imgUrls(item.img)" mode="aspectFit"></image>
                    </view>
                </scroll-view>
                <emptys v-else></emptys>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import api from './api.js';
    import Search from '@/classification/components/Search.vue';
    export default {
        components: {
            Search
        },
        data() {
            return {
                query_text: '',
                title: '',
                placeTxt: '',
                pt: '3',
                type: '1',
                list_id: 0, // 37803
                label_id: 0, // 1342
                page: 1,
                limit: 10,
                pageData: [],
                id: '',

                childPage: 1,
                childLimit: 10,
                articleData: [],
                childMore: true,
                scrollTop: 0
            };
        },
        onLoad(opt) {
            if (opt.pt) this.pt = opt.pt;
            if (opt.type) this.type = opt.type;
            if (opt.list_id) this.list_id = opt.list_id;
            if (opt.label_id) this.label_id = opt.label_id;
            this.init();
        },
        methods: {
            async init() {
                let reuesetObj = {
                    pt: this.pt,
                    type: this.type,
                    list_id: this.list_id,
                    label_id: this.label_id,
                    page: this.page,
                    limit: 100
                };
                const requsetResult = await api.dataQuery(reuesetObj);
                this.title = requsetResult.title;
                this.placeTxt = requsetResult.query_text;
                const result = requsetResult.list || [];
                this.pageData = result;
                if (!this.id) this.id = result[0]?.id;
                this.Article(result[0]?.postArr);
            },
            async Article(postArr) {
                let reuesetObj = {
                    pt: postArr.pt,
                    type: postArr.type,
                    list_id: postArr.list_id,
                    label_id: postArr.label_id,
                    page: this.childPage,
                    limit: this.childLimit
                };
                const requsetResult = await api.dataQuery(reuesetObj);
                const result = requsetResult.list || [];
                this.childPage == 1 ? (this.articleData = result) : (this.articleData = [...this.articleData, ...result]);
                if (result.length < this.childLimit) this.childMore = false;
            },
            scroll(e) {
                this.scrollTop = e.detail.scrollTop;
            },
            scrolltolower() {
                if (!this.childMore) return;
                this.childPage++;
                const currentItem = this.pageData.find((n) => n.id == this.id);
                if (currentItem) this.Article(currentItem.postArr);
            },
            changeTab(Item) {
                this.scrollTop = 0;
                this.childPage = 1;
                this.childMore = true;
                this.id = Item.id;
                this.Article(Item.postArr);
            },
            Search(e) {
                this.toUrl(`andSearch?list_id=${this.list_id}&label_id=${this.label_id}&val=${e}`);

                // console.log(e, 'e');
            }
        },
        computed: {
            ...mapState(['totalHeight', 'System', 'color']),
            scrollHeight() {
                const H = this.System.screenHeight - this.totalHeight - 70 + 'px';
                return ['height:' + H].join(';');
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .Wrapper {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            .Left {
                width: 200rpx;
                height: 100%;
                background-color: #fff;
                overflow-y: scroll;
                .list {
                    width: 100%;
                    height: 100rpx;
                    text-align: center;
                    line-height: 100rpx;
                    position: relative;
                    color: #666;
                    font-size: 30rpx;
                }
                .Active {
                    background-color: $page;
                    color: var(--color);
                    position: relative;
                }
                .Active::after {
                    content: '';
                    width: 2px;
                    height: 34%;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: var(--color);
                }
            }
            .scrollViewBox {
                flex: 1;
                padding: 0 20rpx;
                display: flex;
                flex-direction: column;
            }
            .scrollView {
                width: 100%;
                .list {
                    width: 160rpx;
                    height: 160rpx;
                    background-color: #fff;
                    display: inline-block;
                    padding: 20rpx;
                    margin-right: 14rpx;
                    border-radius: 10rpx;
                    margin-bottom: 14rpx;
                    box-sizing: border-box;
                }
                .list:nth-child(3n) {
                    margin-right: 0 !important;
                }
            }
        }
    }
</style>
